<template>
  <div id="container"></div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import  { Viewport }  from "./Viewport.js";
const emits = defineEmits([''])
onMounted(() => {
  // 动画名称
  let arr = [
    "Byebye",// 常态推出
    "DaZhaoHu",// 原地打招呼
    "Idle",// 原地待机
    "Jump",// 原地跳
    "JumpToSkateboard", // 常态出现
    "Run",// 原地跑
    "Sleep",// 常态睡觉
    "WakeUp",// 常态醒来
    "WakeUpIdle",// 常态醒来待机
    "WakeUpToSleep",// 常态躺下
    "walk",// 原地走
  ];
  const container = document.getElementById("container");
  const viewport = new Viewport(container, {
    modelSrc: "/glb/mascot.glb",
  });
  viewport.init(()=>{
    emits('anithreeClick',4)
    viewport.useAnimation("JumpToSkateboard", 1, () => {
        viewport.useAnimation("Idle",Infinity);
      });
  })
  viewport.mouseEventHandler("click", (data) => {
    emits('anithreeClick',1)
    viewport.animtionReset()
    if (data) {
      viewport.useAnimation("Byebye", 1, () => {
        emits('anithreeClick',2)
      });
    }
  });
});
</script>

<style scoped>
#container {
  width: 100%;
  height: 100%;
  outline: none;
  /* background-color: transparent; */
}
canvas {
  pointer-events: none;
  /* background-color: transparent; */
}
</style>
